import * as React from 'react';
import { SearchOutlined } from '@ant-design/icons';

import { DISPLAY_SET } from '..';
import styles from './index.less';

import type { SearchValue } from '..';

interface ISearchViewProps {
  data: SearchValue;
}

const SearchView: React.FunctionComponent<ISearchViewProps> = (props) => {
  const { bgColor, borderRadius, btnColor, borderColor, displaySetting } = props.data;

  return (
    <div>
      <div className={styles['search-body']} style={{ backgroundColor: bgColor }}>
        <div
          className={styles['search-inner']}
          style={{
            borderRadius: borderRadius + 'px',
            borderColor: displaySetting.includes(DISPLAY_SET.line.value) ? borderColor : 'white',
          }}
        >
          <div className={styles['search-icon']}>
            <SearchOutlined />
            &nbsp; 搜索
          </div>
          {displaySetting.includes(DISPLAY_SET.button.value) ? (
            <div
              className={styles['search-btn']}
              style={{
                borderRadius: borderRadius + 'px',
                backgroundColor: displaySetting.includes(DISPLAY_SET.button.value)
                  ? btnColor
                  : bgColor,
              }}
            >
              搜索
            </div>
          ) : null}
        </div>
      </div>
    </div>
  );
};

export default SearchView;
